<template>
    <div class="Commend main" v-loading="loading">
        <!--推荐课程  start--->
        <!--排序tab-->
        <ul class="sortTab clearfix">
            <li :class="{on:checked2===1}" @click="orderSwitch(1)">最新<svg class="icon" aria-hidden="true"><use xlink:href="#icon-iconset0414"></use></svg></li>
            <li :class="{on:checked2===2}" @click="orderSwitch(2)">最热<svg class="icon" aria-hidden="true"><use xlink:href="#icon-iconset0414"></use></svg></li>
        </ul>

        <div class="mid" >
            <cube-scroll
                         ref="scroll"
                         :data="lessonList"
                         :options="scrollOptions"
                         @pulling-up="onPullingUp">
                <!--产品列表  旧-->
                <!-- <ul class="lists">
                    <router-link tag="li" :to="{path:'/detail',query:{lession_id:item.lession_id,member_id:getMemberId(),prev:true}}" class="clearfix animated slideInRight" :style="{animationDelay:delay(index)}" v-for="(item,index) in lessonList" :key="index">
                        <img :src="item.lession_img" alt="">
                        <div class="infos">
                            <h4 class="tit"><span class="end" v-if="item.is_complete===1">完结</span>{{item.lession_name}}</h4>
                            <p class="admin"><span>{{item.teacher_name}}</span><span>{{item.teacher_level}}</span><span><i class="el-icon-star-off"></i>{{item.lession_level}}</span></p>
                            <div class="other">
                                <span><i class="el-icon-view"></i>&#8197;{{item.lession_view}}</span>
                                <span><i class="el-icon-time"></i>&#8197;{{item.lession_num_hour}}课时</span>
                                <span v-if="item.lession_price>0"><strong>{{item.lession_price}}</strong>花瓣</span>
                                <span v-else><strong>免费</strong></span>
                            </div>
                            <p class="starttime" v-if="item.lession_time && item.is_more===1">开课时间：{{item.lession_time}}&emsp;{{item.lession_update_time}}</p>
                        </div>
                    </router-link>
                </ul> -->
                <!-- 产品列表  新 -->
                <ul class="lists">
                    <router-link tag="li" :to="{path:'/detail',query:{lession_id:item.lession_id,member_id:getMemberId(),prev:true}}" class="clearfix animated slideInRight" :style="{animationDelay:delay(index)}" v-for="(item,index) in lessonList" :key="index">
                        <BaseList :item="item" style="margin-top:.28rem;" />
                    </router-link>
                </ul>
                <!--无数据时显示-->
                <div class="mid" v-if="lessonList.length<=0">
                    <div class="nodata animated fadeIn">
                        <!--
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wushuju"></use>
</svg>
-->
                        <img src="../../assets/huawa-off.png" alt="" />
                        <p>暂无数据..</p>
                    </div>
                </div>
            </cube-scroll>
        </div>
        <!--推荐课程对应列表块  end-->
    </div>
</template>

<script>
    import BaseList from '../../base/baseList.vue'
    export default {
        name: 'Commend',
        components: {
            BaseList
        },
        data () {
            return {
                loading:false,//加载动画
                checked2:-1,//排序列表 切换

                lessonList:[],//数据表
                order:0,//排序选中切换 

                /*上拉加载*/
                scrollOptions: {
                    pullUpLoad: {
                        threshold: 20,
                        txt: {
                            more: '加载更多..',
                            noMore: '没有更多了..'
                        },
                        stopTime:1000
                    }
                },

                /*分页*/
                currentPage:2,//当前页
                prePage:6,//每页显示几条数据
            }
        },
        created(){
            //初始化获取精品课程 作为推荐课程
            let data = {
                cat_id:0,
                keyword:'',
                is_recommend:1,
                order:0,
                lession_type:0,
                teacher_type:0,
                page:1,
                member_id: this.getMemberId()
            };
            this.loading = true;
            this.Posthttp('/?method=flower.index.lessonList',data,(res)=>{
                this.loading = false;
                this.lessonList = JSON.parse(res.bodyText).data.lession;
            });
        },
        methods:{
            //order排序切换
            orderSwitch(num){
                if(this.checked2 === num)return;
                //传给后台的值
                let data = {
                    cat_id:0,
                    keyword:'',
                    is_recommend:1,
                    order:num,
                    lession_type:0,
                    teacher_type:0,
                    page:1,
                    member_id: this.getMemberId()
                };
                this.loading = true;
                this.Posthttp('/?method=flower.index.lessonList',data,(res)=>{
                    this.loading = false;

                    this.order = num;//加载更多时分类
                    this.checked2 = num;//样式改变
                    this.lessonList = JSON.parse(res.bodyText).data.lession;

                    //重置加载更多模块
                    this.currentPage = 2;
                    this.$refs.scroll.scrollTo(0,0,600,'linear')
                });
            },
            //加载更多 (最热课程 order=2)
            onPullingUp(){
                //传给后台的值
                let data = {
                    cat_id:0,
                    keyword:'',
                    is_recommend:1,
                    order:this.order,
                    lession_type:0,
                    teacher_type:0,
                    page:this.currentPage,
                    member_id: this.getMemberId()
                }
                this.Posthttp('/?method=flower.index.lessonList',data,(res)=>{
                    let Dlength = JSON.parse(res.bodyText).data.lession.length;
                    if(Dlength>0){
                        this.currentPage++
                        this.lessonList = this.lessonList.concat(JSON.parse(res.bodyText).data.lession)
                    }else{
                        this.$refs.scroll.forceUpdate()
                    }
                })
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Commend {
        /*排序tab*/
        .sortTab{
            width: 100%;
            height: .8rem;
            line-height: .8rem;
            position: fixed;
            top: .8rem;
            left: 0;
            background-color: #f2f2f2;
            box-shadow: 0 .02rem .05rem rgba(0,0,0,.2);
            z-index: 20;
            li{
                width: 1.5rem;
                height: 100%;
                text-align: center;
                float: left;
                font-size: .26rem;
                color: #666;
                &.on{
                    color: #de6940;
                }
            }
        }
        .orderTab{
            @extend .sortTab;
            background-color: #fff;
            display: flex;
            justify-content: center;
            li{
                width: auto;
                padding: 0 .2rem;
                margin: 0 .2rem;
                &.on{
                    border-bottom: 2px solid #de6940;
                }
            }
        }
        /*中*/
        .mid{
            width: 100%;
            position: fixed;
            top: 1.6rem;
            bottom: 1rem;
            left: 0;
            overflow-y: auto;
            padding: 0 .2rem;
            background-color: #fff;
            /*产品列表   旧*/
            // .lists{
            //     overflow-x: hidden;
            //     li{
            //         width: 100%;
            //         padding:.34rem 0;
            //         border-bottom: 1px solid #e4e4e4;
            //         /*                    animation-duration:1.4s;*/
            //         &:last-child{
            //             border-bottom: 0;
            //         }
            //         /*左侧图片*/
            //         img{
            //             width: 1.88rem;
            //             height: auto;
            //             float: left;
            //         }
            //         /*右侧信息*/
            //         .infos{
            //             margin-left: 1.88rem;
            //             padding-left: .2rem;
            //             position: relative;
            //             /*标题*/
            //             .tit{
            //                 text-overflow: ellipsis;
            //                 overflow: hidden;
            //                 white-space: nowrap;
            //                 color: #333;
            //                 height: .34rem;
            //                 line-height: .34rem;
            //                 margin-bottom: .24rem;
            //                 span.end{
            //                     display: inline-block;
            //                     height: 100%;
            //                     font-size: .28rem;
            //                     padding: 0 .12rem;
            //                     border-radius: .06rem;
            //                     margin-right: .1rem;
            //                     color: #fff;
            //                     background-color: #e7470e;
            //                 }
            //             }
            //             /*老师*/
            //             .admin{
            //                 color: #777;
            //                 margin-bottom: .28rem;
            //                 font-size: .22rem;
            //                 display: flex;
            //                 justify-content: space-between;
            //                 span{
            //                     width: 32%;
            //                     text-align: justify;
            //                     overflow: hidden;
            //                     text-overflow: ellipsis;
            //                     white-space: nowrap;
            //                 }
            //             }
            //             /*其他*/
            //             .other{
            //                 width: 100%;
            //                 display: flex;
            //                 justify-content: space-between;
            //                 align-items: baseline;
            //                 font-size: .22rem;
            //                 strong{
            //                     font-size: .28rem;
            //                     color: #e7470e;
            //                     font-weight: 600;
            //                     margin-right: .02rem;
            //                 }
            //             }
            //             /*开课时间*/
            //             .starttime{
            //                 overflow: hidden;
            //                 text-overflow: ellipsis;
            //                 white-space: nowrap;
            //                 margin-top: .2rem;
            //                 font-size: .2rem;
            //             }
            //         }
            //     }
            // }
            /*加载更多*/
            .moreBtn{
                text-align: center;
                padding: .1rem 0 .3rem;
            }
            .nodata{
                text-align: center;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                right: 0;
                margin: auto;
                color: #999;
                font-size: .28rem;
                .icon{
                    font-size: 2rem; 
                }
            }
        }
    }
</style>
